<template>
	<view class="page">
		<!-- 地址 -->
		<view class="address-data" v-if="goodsInfor.goods.is_address==1">
			<view class="address-list flex-box" v-if="addressInfor.mobile" @click="onSkip('address')">
				<view class="box-1">
					<view class="list">
						<text>{{addressInfor.province+addressInfor.city+addressInfor.district}}</text>
					</view>
					<view class="list">
						<text class="address">{{addressInfor.address}}</text>
					</view>
					<view class="list">
						<text>{{addressInfor.uname}}</text>
						<text>{{addressInfor.mobile}}</text>
					</view>
				</view>
				<u-icon name="arrow-right" size="24" color="#c5c5c5"></u-icon>
			</view>
			<view class="n-address" v-else>
				<view class="a-1 flex-box" @click="onSkip('address')">
					<view class="box-1">添加收货地址</view>
					<u-icon name="arrow-right" size="24" color="#c5c5c5"></u-icon>
				</view>
			</view>

			<view class="bar"></view>
		</view>
		<!-- 商品 -->
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>
			<view class="goods-list">
				<view class="list">
					<view class="thumb">
						<image :src="goodsInfor.goods.imglogo" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="name one-omit">{{goodsInfor.goods.title}}</text>
							<!-- <text class="attr">颜色：灰色,XL</text> -->
						</view>
						<view class="price-number">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">{{goodsInfor.goods.price || 0}}</text>
								<!-- <text class="min">.00</text> -->
							</view>
							<view class="number">
								<text>x 1</text>
							</view>
						</view>
						<!-- <view class="tag">
							<text>支持七天无理由退货</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="delivery">
				<div class="list">
					<view class="title">配送</view>
					<view class="content">
						<text>包邮</text>
						<!-- <text class="iconfont icon-more"></text> -->
					</view>
				</div>
				<!-- 	<div class="list">
					<view class="title">运费险</view>
					<view class="content">
						<text>￥10.00</text>
						<text class="iconfont icon-check"></text>
					</view>
				</div> -->
				<!-- 	<div class="list">
					<view class="title">留言</view>
					<view class="content">
						<input type="text" placeholder="选填,建议先和商家沟通确认">
					</view>
				</div> -->
			</view>
		</view>
		<!-- 优惠 -->
		<view class="discounts-data">
			<view class="discounts">
				<!-- <div class="list" @click="$refs['InvoiceInfo'].show()">
					<view class="title">发票</view>
					<view class="content">
						<text>不开发票</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div> -->
				<!-- <div class="list" @click="$refs['UseCoupon'].show()">
					<view class="title">优惠券</view>
					<view class="content">
						<text>无可用</text>
						<text class="iconfont icon-more"></text>
					</view>
				</div> -->
				<div class="list">
					<view class="title">魅力值 <text
							style="margin-left:10rpx;font-size:26rpx;">{{goodsInfor.points}}</text></view>
					<view class="content">
						<u-switch v-model="value" activeColor="#d0abf4" @change="changeSwitch"></u-switch>
					</view>
				</div>
			</view>
		</view>

		<!-- 订单金额 -->
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品金额</text>
					</view>
					<view class="price">
						<text>￥{{goodsInfor.total_price || ''}}</text>
					</view>
				</view>
				<!-- 	<view class="list">
					<view class="title">
						<text>会员折扣</text>
					</view>
					<view class="price">
						<text>-￥19.00</text>
					</view>
				</view> -->
				<!-- <view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view> -->
				<!-- 	<view class="list">
					<view class="title">
						<text>运费险</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 支付方式列表 -->
		<view class="pay-way">
			<view class="pay-list">
				<view class="list" v-for="(item,index) in PayList" @click="onPayWay(item,index)" :key="index">
					<view class="pay-type">
						<image :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="check">
						<text class="iconfont" :class="PayWay === index ? 'icon-checked action':'icon-check'"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 地址提示 -->
		<view class="address-tips" :style="scrollTop >= 100 ? '':'display:none'">
			<text>{{addressInfor.address}}</text>
		</view>
		<!-- 底部合计提交 -->
		<view class="footer-submit">
			<view class="price">
				<text class="min">￥</text>
				<text class="max"
					v-if="value">{{(parseFloat(goodsInfor.points)>=goodsInfor.goods.price?0:(goodsInfor.goods.price-goodsInfor.points)).toFixed(2)}}</text>
				<text class="max" v-else>{{goodsInfor.total_price.toFixed(2)}}</text>

				<!-- <text class="min">.00</text> -->
			</view>
			<view class="submit" @click="onSubmit">
				<text>确认支付</text>
			</view>
		</view>
		<!-- 发票 -->
		<invoice-info ref="InvoiceInfo"></invoice-info>
		<!-- 优惠券 -->
		<use-coupon ref="UseCoupon"></use-coupon>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
	</view>
</template>

<script>
	import InvoiceInfo from '../../components/InvoiceInfo/InvoiceInfo.vue';
	import UseCoupon from '../../components/UseCoupon/UseCoupon.vue'
	import numberJpan from "../../components/numberJpan/numberJpan.vue";
	export default {
		components: {
			// 发票
			InvoiceInfo,
			// 优惠券
			UseCoupon,
			numberJpan,
		},
		data() {
			return {
				PayList: [{
						icon: '/static/wx_pay.png',
						name: '微信支付',
					},
					// {
					// 	icon: '/static/zfb_pay.png',
					// 	name: '支付宝支付',
					// },{
					// 	icon: '/static/ye_pay.png',
					// 	name: '余额支付',
					// },
				],
				PayWay: 0,
				value: false,
				scrollTop: 0,
				addressInfor: {},
				goodsInfor: {},
				id: 0,
				showNum: true,
			};
		},
		onLoad(options) {
			// this.goodsInfor = JSON.parse(decodeURIComponent(options.item))
			this.id = options.id
		},
		onShow() {
			this.getAddress()
			this.getGoodsDetails()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			closeChange(n) {
				let _this = this
				uni.login({
					success: function(res) {
						//魅力值抵扣
						_this.$u.api.ordersCreate({
								goods_id: _this.goodsInfor.goods.id,
								num: 1,
								address_id: _this.addressInfor.id,
								is_points: _this.value ? 1 : 0,
								pwd: n,
								code: res.code
							})
							.then(res => {
								console.log(res, 'registerorder_create');
								let result = res.msg
								if (res.status) {
									// 支付成功的回调中 创建绘本馆成功
									uni.showToast({
										title: '支付成功',
										icon: 'none',
										duration: 3000,
										success() {
											console.log('success')
											if (_this.goodsInfor.goods.flag == 'vip') {
												uni.redirectTo({
													url: '/pages/PayResult/PayResult?item=' +
														2,
												})
											} else {
												uni.redirectTo({
													url: '/pages/PayResult/PayResult',
												})
											}


										}
									});
								} else if (res.code == -4) {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										success() {
											console.log('success')
											uni.redirectTo({
												url: '/pages/sub/Setting/change_pwd_pay',
											})

										}
									});
								} else if (res.code == -7) {
									//微信支付
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.msg.timeStamp, // 时间戳从1970年1月1日至今的秒数，即当前的时间
										nonceStr: res.msg.nonceStr, // 随机字符串，长度为32个字符以下
										package: res.msg
										.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
										signType: res.msg.signType, //签名算法，暂支持 MD5
										paySign: res.msg.paySign, // 签名
										success: function(res) {
											// 支付成功的回调中 创建绘本馆成功
											uni.showToast({
												title: '微信支付成功',
												icon: 'none',
												duration: 3000,
												success() {
													if (_this.goodsInfor.goods.flag ==
														'vip') {
														uni.redirectTo({
															url: '/pages/PayResult/PayResult?item=' +
																2,
														})
													} else {
														uni.redirectTo({
															url: '/pages/PayResult/PayResult',
														})
													}

												}
											});


										},
										fail: function(err) {
											// 支付失败的回调中 用户未付款
											uni.showToast({
												title: '支付取消',
												duration: 3000,
												image: '/static/png/error_icon.png',
												success: function() {
													uni.navigateBack()

												}
											});
										}
									});

								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}

							})
					}

				})

			},
			/**
			 * 支付方式切换点击
			 */
			onPayWay(item, index) {
				this.PayWay = index;
				this.PayPirce = `${item.name}￥299.00`
			},
			// 默认监听
			changeSwitch(value) {
				console.log(value)
			},
			getGoodsDetails() {
				this.$u.api.ordersPre({
						goods_id: this.id,
						num: 1
					}).then(res => {
						if (res.status) {
							this.goodsInfor = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 获取默认地址
			getAddress() {
				this.$u.api.addressMess().then(res => {

						if (res.status) {
							this.addressInfor = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			/**
			 * 提交订单
			 */
			onSubmit() {
				let _this = this
				let cond = (this.goodsInfor.goods.price - this.goodsInfor.points)
				console.log(cond, 'cond', this.value, 'value')

				// return false
				if (!this.value || this.value && (this.goodsInfor.goods.price - this.goodsInfor.points) > 0) {
					uni.requestSubscribeMessage({
						tmplIds: ['gJX2dbzFtaUUknhtMVH3wrP606CZl_1OIHnWv3itU3M',
							'CBZRv2ZS6CAkGl11hihyqN4Y_aixiInAYepbxntCKtA'
						],
						complete: (obj) => {
					uni.login({
						success: function(res) {
						
									//魅力值抵扣
									_this.$u.api.ordersCreate({
											goods_id: _this.goodsInfor.goods.id,
											num: 1,
											address_id: _this.addressInfor.id,
											is_points: _this.value ? 1 : 0,
											code: res.code
										})
										.then(res => {
												console.log(res, 'registerorder_create');
												
												let result = res.msg
												if (res.status) {
													// 支付成功的回调中 创建绘本馆成功
													uni.showToast({
														title: '支付成功',
														icon: 'success',
														duration: 3000,
														success() {
															console.log('success')
															if (_this.goodsInfor.goods
																.flag == 'vip') {
																uni.redirectTo({
																	url: '/pages/PayResult/PayResult?item=' +
																		2,
																})
															} else {
																uni.redirectTo({
																	url: '/pages/PayResult/PayResult',
																})
															}

														}
													});
												} else if (res.code == -4) {
													uni.showToast({
														title: res.msg,
														duration: 3000,
														success() {
															console.log('success')
															uni.redirectTo({
																url: '/pages/sub/Setting/change_pwd_pay',
															})

														}
													});
												} else if (res.code == -7) {
													
													//微信支付
													uni.requestPayment({
														provider: 'wxpay',
														timeStamp: res.msg
														.timeStamp, // 时间戳从1970年1月1日至今的秒数，即当前的时间
														nonceStr: res.msg
														.nonceStr, // 随机字符串，长度为32个字符以下
														package: res.msg
														.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
														signType: res.msg
														.signType, //签名算法，暂支持 MD5
														paySign: res.msg.paySign, // 签名
														success: function(res) {
															// 支付成功的回调中 创建绘本馆成功
															uni.showToast({
																title: '微信支付成功',
																icon: 'success',
																duration: 2000,
																success() {
																	if (_this
																		.goodsInfor
																		.goods
																		.flag ==
																		'vip'
																		) {
																		uni.redirectTo({
																			url: '/pages/PayResult/PayResult?item=' +
																				2,
																		})
																	} else {
																		uni.redirectTo({
																			url: '/pages/PayResult/PayResult',
																		})
																	}

																}
															});


														},
														fail: function(err) {
															// 支付失败的回调中 用户未付款
															uni.showToast({
																title: '支付取消',
																duration: 2000,
																image: '/static/png/error_icon.png',
																success: function() {
																	uni.navigateBack()

																}
															});
														}
													});
													

												} else {
													uni.showToast({
														title: res.msg,
														icon: 'none'
													})
												}
											
										})
											
										
									
						},
						fail:(res)=>{
							console.log('res--',res);
						}


					})
				}
				
				})
				} else {
					this.$refs.numberPad.open()
					return false
				}


				// uni.redirectTo({
				// 	url: '/pages/CashierDesk/CashierDesk',
				// })
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'address':
						uni.navigateTo({
							url: '/pages/sub/AddressList/AddressList',
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'ConfirmOrder.scss';
	@import 'CashierDesk.scss';
</style>